<template>
  <div class=".app-container">
    <el-row style="margin-top: 20px; margin-left: 20px">
      <el-col :span="24">
        <el-button type="primary" @click.native="insertTemplate">新增审批模板</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px; margin-left: 20px">
      <el-table v-loading="loading" :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column type="selection" width="50" prop="id" align="center" />
        <el-table-column prop="templateName" label="审批名称" width="180" align="center" />
        <el-table-column prop="iconUrl" label="图标" width="180" align="center">
          <template #default="scope">
            <img :src="scope.row.iconUrl" alt="图标" style="width: 50px; height: 50px" />
          </template>
        </el-table-column>
        <el-table-column prop="typeName" label="审批类型" align="center" />
        <el-table-column prop="description" label="描述" align="center" />
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button v-if="scope.row.status == 0" size="mini" type="success" @click="deploymentProcess(scope.row.id)"
              >部署</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
  import { list, deploymentProcess, deleteById } from '@/api/oaProcessTemplate'
  export default {
    name: 'Template',
    data() {
      return {
        loading: false,
        total: 0,
        page: 1,
        pageSize: 10,
        tableData: []
      }
    },
    created() {
      this.loading = true
      this.list()
      this.loading = false
    },
    methods: {
      async list() {
        const resault = await list(this.page, this.pageSize, {})
        this.total = resault.total
        this.tableData = resault.list
      },
      insertTemplate() {
        this.$router.push({ path: '/approval/approvalSet' })
      },
      /**
       * 删除流程模板
       * @param id
       */
      handleDelete(id) {
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await deleteById(id)
            this.$message.success('删除成功')
            this.list()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      /**
       * 部署流程
       */
      async deploymentProcess(id) {
        await deploymentProcess(id)
        this.$message.success('部署成功')
        this.list()
      },
      /**
       * 编辑流程模板
       * @param id
       */
      handleEdit(id) {},
      /**
       * 查看流程模板
       * @param id
       */
      handleView(id) {},
      handleSizeChange(val) {
        this.pageSize = val
        this.list()
      },
      handleCurrentChange(val) {
        this.page = val
        this.list()
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      }
    }
  }
</script>
<style></style>
